dev {
    color: pink;
    font-size: 100px;
}
/* 层叠性（后来者居上） */
dev {

    font-size: 20px;
}

/* 类选择器测试 */
.pink {
    color: pink;
}
.green {
    color: green;
}
.yellow {
    color: yellow;
}
.red {
    color: red;
}
.blue {
    color: blue;
}
.big {
    font-size: 30px;
}
/* id选择器测试 */
#id1 {
    color: whitesmoke
}
/* 通配符选择器测试 */
* {
    /* font-size: 10px;  */
}

/* 关系选择器测试 */
.header{
    background-color: black;
}
.header a {
    color: white;
}
.zidai>p {
    color: red;
}
h1+p{
    color: blue;
}
h2~p {
    color: yellow;
}

/* 分则选择器练习 */
.group1 p ,
.group2 p {
    color: red;
}

/* 伪类选择器练习 */
.b {
    background-color: whitesmoke;
    height: 80px;
    width: 80px;
}

.b a {
    color: black;
    text-align: center;
    line-height: 80px;
    width: 100%;
    text-decoration: none;
}

.b a:link {
    color: black;
    text-align: center;
    line-height: 80px;
    width: 100%;
    text-decoration: none;
}
/* 已访问样式 */
.b a:visited {
    color: white;
}
/* 悬停时候 */
.b a:hover {
    color: red;
}
/* 被点击时 */
.b a:active {
    color: blue;
}
/* 用户行为伪类选择器 */

.boxWEILEI{
    background-color: white;
    color: black;
    height: 100px;
    width: 100px;
}
.boxWEILEI p{
    text-align: center;
    line-height: 100px;

}
.boxWEILEI:hover{
    
    background-color: black;
    color: white;
}

.boxWEILEI2 input{
    background-color: white;
    color: black;
    height: 20px;
    width: 100px;
}
.boxWEILEI2 input:focus{
    background-color: lightblue;
    height: 20px;
    width: 200px;

}

.ul1WEILEI li:first-child{
    color: red;
}
.ul1WEILEI li:last-child{
    color: blue;
}
.ul1WEILEI li:nth-child(2){
    color: yellow;
}
.ul2WEILEI li:nth-child(even){
    color: red;
}

.tableWEILEI {
    border: 1px solid black;
    width: 400px;
    margin :0 auto;
}
.tableWEILEI tr:nth-child(odd){
    background-color: gray;
    color:white;
}
.tableWEILEI tr:first-child{
    background-color: black!important;
    color: white;
}
.tableWEILEI tr:hover
{
    background-color: red;
    color: white;
}

.formWEILEI button{
    background-color: black;
    color: white;
    height: 20px;
    width: 100px;
    border: none;
}

.formWEILEI button:disabled{
    /* background-color: gray; */
    opacity: .4;
}
.formWEILEI input:checked+label {
    color: red;
}

/* 伪元素选择器 */
.WEIYUANSU p::first-line{
    color: red;
}

.WEIYUANSU p::first-letter{
    color: blue;
}

.WEIYUANSU input::placeholder{
    color: blue;
}

.WEIYUANSU span::before {
    content: "i am";
    color: gray;
}

.SHUXING input[class$="s1"][type="text"]
{
    outline: none;
}




